<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box {
            width: 170px;
            height: 170px;
            background: darkcyan;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent></parent>
    </div>


    <!-- 展示数据 -->
    <template id="parent">
        <div>
            <h2>parent - 父组件 - 1</h2>
            <hr>
            <childone :word="word" ref="child1"></childone>
            <hr>
            <childtwo :setnewword = "setnewword" @change = "setnewword" :changeonebyref="changeOneByRef"></childtwo>
        </div>
    </template>
    <template id="childone">
        <div>
            <h2>childone - 子组件 - 1</h2>
            <h2>count -- {{count}}</h2>
            <h2>msg -- {{msg}}</h2>
            <h2>word -- {{word}}</h2>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>childtwo - 子组件 - 2</h2>
            <button @click = "changeOneCount">事件总线去修改组件one - count</button>
        </div>
    </template>

    <script>
        const bus = new Vue();

        //修改数据
        Vue.component("myhead",{
            template:"<h2>好好学习兄弟之间的关系daydayup</h2>"
        })
        Vue.component("parent",{
            template:"#parent",
            data(){
                return{
                    word:"word hard for money"
                }
            },
            methods: {
                setnewword(word){
                    this.word = word;
                },
                changeOneByRef(){
                    this.$refs.child1.msg = "努力才成功"
                }
            },
        })
        Vue.component("childone",{
            template:"#childone",
            props:{
                word:String
            },
            data(){
                return{
                    count:1000,
                    msg:"2114 - daydayup"
                }
            },
            mounted(){
                bus.$once("hjdbfjsb",n=>{
                    this.count+=n;
                })
            },
            created(){
                bus.$on("changeOneMsg",msg=>{
                    this.msg = msg
                })
            }
        })
        Vue.component("childtwo",{
            template:"#childtwo",
            //规定样式
            props:{
                setnewword:Function,
                changeonebyref:Function
            },
            methods:{
                changeOneCount(){
                    bus.$emit("hjdbfjsb",220)
                },
                changeOneMsg(){
                    bus.$emit("changeOneMsg",'复习vueX')
                }
            }
        })


        const vm = new Vue({
            data:{
                title:"Vue component  兄弟组件通信"
            },
            components:{
                first:{
                    template:"<h2>First - Vue 组件初始化</h2>"
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
            },
        }).$mount("#app")
    </script>
</body>

</html>